import { Avatar, Modal, Popconfirm, Popover } from 'antd'
import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import Login from '../Login'
import Register from '../Register'
import style from './style.module.less'
import { UserOutlined } from '@ant-design/icons';
import Search from 'antd/lib/input/Search'
import { getUserInfo, logout } from '../../services/api'
import { IUser } from '../../types'
import logo from '../../assets/imgs/logo.png'

interface Props {
    upKeyword: (key: string) => void
}
function Nav(props: Props) {
    let history = useHistory()
    const [isLogin, setIsLogin] = useState(false) //是否登录
    const [user, setUser] = useState<IUser>({ nickname: '', avatar: '', pwd: '', account: '' })
    const [loginVisible, setLoginVisible] = useState(false) //登录弹窗
    const [regisVisible, setRegisVisible] = useState(false) //注册弹窗

    //初始化判断是否登录
    useEffect(() => {
        getUserInfo().then((res) => {
            if (res.stat === 'ok') {
                if (res.data)
                    setUser(res.data)
                setIsLogin(true)
            }
        })
    }, [isLogin])

    const loginChild = () => {
        setIsLogin(true);
        setLoginVisible(false)
    }
    const regisChild = () => {
        setRegisVisible(false)
    }
    const toPerson = () => {
        history.push("/Person")
    }
    const onSearch = (value: string) => {
        props.upKeyword(value)
    }
    return (
        <>
            <div className={style.header}>
                <div className={style.left}>
                    <img src={logo} alt="" className={style.logo} />
                </div>
                <div className={style.right}>
                    <Search placeholder="搜索文章" onSearch={onSearch} style={{ width: 200, marginRight: 10 }} />
                    <div className={isLogin ? style.none : style.login}>
                        <ul className={style.rightTag}>
                            <li onClick={() => setRegisVisible(true)} >注册</li>
                            <li onClick={() => setLoginVisible(true)} >登录</li>
                        </ul>
                    </div>
                    <div className={isLogin ? style.login : style.none}>
                        <Popover content={
                            <>
                            <div>个人信息</div>
                            <Popconfirm
                                placement="rightBottom"
                                title="确定要退出登录吗？"
                                onConfirm={() => { logout(); window.location.href = "/" }}
                                okText="确定"
                                cancelText="取消"
                            >
                                <a>退出登录</a>
                            </Popconfirm>
                            </>
                            }>
                            <div className={style.master} onClick={toPerson}>
                                <Avatar size={32} src={user.avatar} icon={<UserOutlined />} />
                            </div>
                        </Popover>
                    </div>
                </div>
            </div>
            {/* 登录弹出框 */}
            <Modal
                visible={loginVisible}
                title="登录"
                onOk={() => setLoginVisible(true)}
                onCancel={() => setLoginVisible(false)}
                footer={null}
            >
                <Login isLogin={loginChild} setRegisVisible={setRegisVisible} />
            </Modal>
            {/* 注册弹出框 */}
            <Modal
                visible={regisVisible}
                title="注册"
                onOk={() => setRegisVisible(true)}
                onCancel={() => setRegisVisible(false)}
                footer={null}
            >
                <Register isRegis={regisChild} />
            </Modal>
        </>
    )
}
export default Nav